<template>
  <div class="appraise-wrap" v-show="showModal" @touchmove.prevent>

    <div class="appraise-modal">
      <span class="title">{{hint}}</span>
      <span class="rate">{{title}}</span>
      <button type="button" class="rate-btn" @click="promptlyRate">立即评价</button>

      <div class="close-box" @click="closeModal">
        <img src="./close.png" class="pic" onclick="return false"/>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: Boolean,
        default: false
      },
      hint: {
        type: String,
        default: '恭喜您，入职成功'
      },
      title: {
        type: String,
        default: '您可以对本次入职体验进行评价'
      }
    },
    data() {
      return {
        showModal: false
      }
    },
    mounted() {
      this.showModal = this.value;
    },
    methods: {
      closeModal() {
        this.showModal = false;
      },
      promptlyRate() {
        this.showModal = false;
        this.$emit("promptlyRate");
      }
    },
    watch: {
      value(newVal) {
        this.showModal = newVal;
      },
      showModal(val) {
        this.$emit('input', val);
      }
    },
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .appraise-wrap
    modal(fixed, 100, 0.5)
    .appraise-modal
      display: flex
      flex-direction: column
      align-items: center
      position: relative
      wh(8rem, 8.693rem)
      bg-image("./bg.png", 100%, 100%);
      .title
        padding-top: 4.933rem
        padding-bottom: 0.307rem
        size-color(0.6rem, rgba(60, 175, 255, 1))
        font-weight: 500
      .rate
        padding-bottom: 0.533rem
        size-color(0.427rem, rgba(175, 177, 179, 1))
      .rate-btn
        wh(6.933rem, 1.067rem)
        line-height: 1.067rem
        background: rgba(60, 175, 255, 1)
        border-radius(0.16rem)
        size-color(0.427rem, rgba(255, 255, 255, 1))
      .close-box
        position: absolute
        bottom: -1.2rem
        z-index: 100
        .pic
          wh(0.8rem, 0.8rem)
</style>
